<template>
  <div class="register">
    <div class="top">
      <div class="title">{{ detailStore.hospitalInfo.hospital?.hosname || '-' }}</div>
      <div class="level">
        <svg
          t="1726644771274"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4288"
          width="16"
          height="16">
          <path
            d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
            fill="#7f7f7f"
            p-id="4289"></path>
        </svg>
        {{ detailStore.hospitalInfo.hospital?.param.hostypeString }}
      </div>
    </div>
    <div class="content">
      <img :src="'data:image/png;base64,' + detailStore.hospitalInfo.hospital?.logoData" />
      <div class="detail">
        <p class="title">挂号规则</p>
        <p class="detail-p">
          <span>预约周期：{{ detailStore.hospitalInfo.bookingRule?.cycle }}天</span>
          <span>放号时间：{{ detailStore.hospitalInfo.bookingRule?.releaseTime }}</span>
          <span>停挂时间：{{ detailStore.hospitalInfo.bookingRule?.stopTime }}</span>
        </p>
        <p class="detail-p">
          具体地址： {{ detailStore.hospitalInfo.hospital?.param.fullAddress || '--' }}
        </p>
        <p class="detail-p">规划路线：{{ detailStore.hospitalInfo.hospital?.route || '-' }}</p>
        <p class="detail-p">退号时间：XXXX</p>
        <p class="title">医院预约规则</p>
        <p
          class="detail-p"
          v-for="(item, index) in detailStore.hospitalInfo.bookingRule?.rule || []"
          :key="index">
          {{ index + 1 + '. ' + item }}
        </p>
      </div>
    </div>
    <div class="department">
      <div class="leftNav">
        <ul>
          <li
            @click="handleSelectDepartment(department, index)"
            v-for="(department, index) in detailStore.department"
            :class="{ active: currentIndex == index }"
            :key="department.depcode">
            {{ department.depname }}
          </li>
        </ul>
      </div>
      <div class="departmentInfo">
        <div
          class="show-department"
          :id="'department' + department.depcode"
          v-for="department in detailStore.department"
          :key="department.depcode">
          <p class="department-name">{{ department.depname }}</p>
          <div class="detail">
            <span v-for="item in department.children" :key="item.depcode" @click="showLogin(item)">
              {{ item.depname }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import useDetailStore from '@/store/modules/hospitalDetail'
// import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'
const detailStore = useDetailStore()
const $router = useRouter()
import { Department } from '@/api/hospital/type'
// 控制高亮
let currentIndex = ref(0)
// 选择科室
const handleSelectDepartment = (department: Department, index: number) => {
  currentIndex.value = index
  document.getElementById('department' + department.depcode)?.scrollIntoView({ behavior: 'smooth' })
}
// 选择科室
const showLogin = (item) => {
  // 点击科室~,进入相应的预约挂号详情页面
  let path = `/hospital/register_step1/${item.depcode}`
  $router.push({
    path,
    query: {
      hoscode: detailStore.hospitalInfo.hospital.hoscode
    }
  })
  // userStore.visiable = true
}
</script>

<style lang="scss" scoped>
.register {
  .top {
    display: flex;
    align-items: center;
    font-size: 20px;
    .level {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-left: 20px;
      color: #7f7f7f;
    }
  }
  .content {
    display: flex;
    padding-top: 20px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 4px;
      margin-right: 20px;
      border-radius: 50%;
    }
    .detail {
      p {
        margin: 0;
        padding: 0;
      }
      .title {
        font-size: 16px;
        font-weight: bold;
        margin: 10px 0;
      }
      .detail-p {
        font-size: 15px;
        margin: 5px 0;
        line-height: 24px;
        color: #7f7f7f;
        span {
          margin-right: 20px;
        }
      }
    }
  }
  .department {
    width: 100%;
    margin-top: 20px;
    display: flex;
    height: 500px;
    border-radius: 10px;
    .leftNav {
      width: 150px;
      ul {
        width: 100%;
        height: 100%;
        background-color: #f8f8f8;
        display: flex;
        flex-direction: column;
        text-align: center;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        font-size: 14px;
        li {
          height: 40px;
          line-height: 40px;
          cursor: pointer;
          border-left: 2px solid transparent;
          &.active {
            background-color: #fff;
            border-left-color: #f56c6c;
          }
          &:hover {
            border-left-color: #f56c6c;
            background-color: #fff;
          }
        }
      }
    }
    .departmentInfo {
      flex: 1;
      margin-left: 10px;
      height: 100%;
      overflow-y: scroll;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }
      .show-department {
        padding-bottom: 10px;
        .department-name {
          font-size: 16px;
          font-weight: bold;
          line-height: 30px;
          padding-left: 10px;
          border-radius: 2px;
          background-color: rgb(248, 248, 248);
          margin-bottom: 10px;
        }
        .detail {
          width: 100%;
          padding-left: 10px;
          span {
            display: inline-block;
            font-size: 14px;
            width: 33%;
            line-height: 36px;
            color: #7f7f7f;
            cursor: pointer;
            &:hover {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
}
</style>
